import {nanoid, PageContainer} from "@ant-design/pro-components";
import {Button, Card, Select, Space, Table} from "antd";
import {useEffect, useState} from "react";
import SchoolLogo from "../../../../config/logos/SchoolLogo";
import {DeleteOutlined, EditOutlined, RollbackOutlined} from "@ant-design/icons";
import schoolLists from "@/pages/dashboard/components/SchoolLists";

const columns = [
  // {
  //   title: '序号',
  //   dataIndex: 'index',
  //   key: 'index'
  // },
  {
    title: '学校',
    dataIndex: 'school_name',
    key: 'school_name',
    render(d: string | number) {
      return <><img style={{width: 20}} src={SchoolLogo[d]} alt={String(d)}/> {d}</>
    }
  },
  {
    title: '学科',
    dataIndex: 'subject_name',
    key: 'subject_name',
  },
  {
    title: '监测点',
    dataIndex: 'point',
    key: 'point',
  },
  {
    title: '填报周期',
    dataIndex: 'circle',
    key: 'circle',
  },
  {
    title: '审核状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => {
      return <Space>
        <Button type="primary"><EditOutlined/> 审核</Button>
        {/*<Button danger><DeleteOutlined/> 删除</Button>*/}
        {/*<Button disabled><RollbackOutlined/> 撤回</Button>*/}
      </Space>
    }
  },
];

const App = () => {

  // ************************ 加载列表 Start ************************
  const [reload, setReload] = useState(true)
  const [loading, setLoading] = useState(false)
  const [dataSource, setDataSource] = useState([])
  const [originData, setOriginData] = useState([])
  useEffect(() => {

    setLoading(true)

    let data = []
    const schoolList = ['南昌大学', '江西财经大学', '江西中医药大学', '江西农业大学', '南昌航空大学']
    const subjectList = ['红色基因传承学科群', '临床医学与公共卫生大健康学科群', '流域碳中和学科群', '人工智能与先进制造学科群', '绿色食品学科群']
    const pointList = ['省级教学成果奖情况', '出版教材质量', '给本科生上课的正教授人数', '主持其他国家项目清单', '主持国家重点重大项目清单']

    for (let i = 0; i < 100; i++) {
      data.push({
        key: nanoid(),
        school_name: schoolList[parseInt(String((Math.random() * 100) % schoolList.length))],
        subject_name: subjectList[parseInt(String((Math.random() * 100) % subjectList.length))],
        point: pointList[parseInt(String((Math.random() * 100) % pointList.length))],
        circle: '一年一次',
        status: '已审核',
      })
    }

    data.sort(function (a, b) {
      return a.school_name > b.school_name ? 1 : -1
    })
    for (let i = 0; i < data.length; i++) {
      data[i].index = i + 1
    }
    setDataSource(data)
    setOriginData(data)
    console.log("originData", originData)

    setLoading(false)
  }, [reload])
  // ************************ 加载列表 End ************************

  // ************************ 复选框 Start ************************
  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
  //   console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  //   setSelectedRowKeys(newSelectedRowKeys);
  // };
  //
  // const rowSelection = {
  //   selectedRowKeys,
  //   onChange: onSelectChange,
  // };
  // const hasSelected = selectedRowKeys.length > 0;
  // ************************ 复选框 End ************************

  // ************************ 筛选框 Start ************************
  const { Option } = Select;

  const schoolList = ['南昌大学', '江西财经大学', '江西中医药大学', '江西农业大学', '南昌航空大学']
  const [schoolSelected, setSchoolSelected] = useState([])
  const schoolFilter: React.ReactNode[] = [];
  for (let i = 0; i < schoolList.length; i++) {
    schoolFilter.push(<Option key={schoolList[i]}>{schoolList[i]}</Option>);
  }

  const handleSchoolFilterChange = (value: string[]) => {
    console.log(`selected ${value}`);
    setSchoolSelected(value)
  };

  const handleSearch = () => {

    if (schoolSelected.length === 0) {
      setDataSource(originData)
      return
    }

    const newDataSource = []
    for (let i = 0; i < originData.length; i++) {
      for (let j = 0; j < schoolSelected.length; j++) {
        if (schoolSelected[j] === originData[i].school_name) {
          newDataSource.push(originData[i])
          break
        }
      }
    }
    setDataSource(newDataSource)
  }

  // ************************ 筛选框 End ************************

  return <PageContainer title="审核">
    <Space direction="vertical" size="middle" style={{display: 'flex'}}>
      <Card>
        <Space>
          学校：
          <Select
            mode="multiple"
            allowClear
            style={{ width: '400px' }}
            placeholder="请选择学校"
            onChange={handleSchoolFilterChange}
          >
            {schoolFilter}
          </Select>

          <Button type="primary" onClick={handleSearch}>搜索</Button>
        </Space>
      </Card>
      <Card>

        <Space direction="vertical" size="middle" style={{display: "flex"}}>
          {/*<Space>*/}
          {/*  <Button danger disabled={!hasSelected}><DeleteOutlined/> 批量删除</Button>*/}
          {/*  <span style={{marginLeft: 8}}>*/}
          {/*  {hasSelected ? `您已选中 ${selectedRowKeys.length} 条数据` : ''}*/}
          {/*</span>*/}
          {/*</Space>*/}

          {/*<Table rowSelection={rowSelection} loading={loading} dataSource={dataSource} columns={columns}/>*/}
          <Table loading={loading} dataSource={dataSource} columns={columns}/>
        </Space>

      </Card>
    </Space>
  </PageContainer>
}

export default App
